<template>
  <div id="passage-relevant">
    <recommend-passage :passages="passages"></recommend-passage>
  </div>
</template>

<script setup lang="ts">
import RecommendPassage from '@/composables/RecommendPassage.vue'
import { getRecommendRelevantPassage } from '@/services/api/passage'
import { onBeforeMount, reactive } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { Passage } from '@/utils/dataType/ArticleModel'

const passages = reactive<Array<Passage>>([])

//todo实现追加数据
onBeforeMount(async () => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '正在获取中...',
    background: 'rgba(0,0,0,0.5)',
  })
  try {
    const res = await getRecommendRelevantPassage()
    if (res.data.length === 0) {
      ElMessage.info('暂无文章推荐')
    } else {
      passages.splice(0, passages.length, ...res.data)
      ElMessage.success('已成功为您推荐相关' + passages.length + '篇文章')
    }
  } catch (error) {
    console.error('推荐文章加载失败:' + error)
  } finally {
    loadingInstance.close()
  }
})

// async function recommenRelevantPassage() {
//   const res = await getRecommendRelevantPassage()
//   if (res.status == 200 && res.data.code == 1) {
//     if (res.data.data.length == 0) {
//       ElMessage.info('暂无文章推荐')
//     } else {
//       passages.splice(0, passages.length, ...res.data.data)
//       ElMessage.success('已成功为您推荐相关' + passages.length + '篇文章')
//     }
//   } else {
//     throw Error(res.data.msg)
//   }
// }
</script>

<style>
#passage-relevant {
  width: 100%;
}
</style>
